<template>
 <div class="main-container">
    <!-- 上容器 -->
    <div class="top-container border">
      <h2  class="centered-title">爆炸实验</h2>
    </div>

    <!-- 中容器 -->
    <div class="middle-container border">
      <h2 class="centered-title">折线图</h2>

      <div id="chart"  class="chart-wrapper"></div>
    
    </div>

    <!-- 下容器 -->
    <div class="bottom-container border">
            <el-row>
    <el-col :span="6">
      <div class="grid-content" >
                 <el-button :style= "{width: '200px'}" @click="listPorts" >查找串口列表</el-button>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="grid-content1" >

      </div>
    </el-col>
 
   
  </el-row>


      <el-row>
      <el-col :span="1.5">
      <div class="grid-content1" >
        <el-button class="btn1" :style= "{width: '100px' }" >串口列表</el-button>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content" >
        <el-select  class="grid-content1" v-model="selectedPort" placeholder="请选择串口">
        <el-option
            v-for="port in serialPortList"
            :key="port.path"
            :label="port.path"
            :value="port.path"
        />
        </el-select>
      </div>
    </el-col>
    <el-col :span="1">
      <div class="grid-content" ></div>
    </el-col>

    <el-col :span="2">
      <div class="grid-content" >
        <el-button @click="openSpecificPort">打开串口</el-button>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="grid-content" >
        <el-button @click="closeSpecificPort">关闭串口并绘图</el-button>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="grid-content" ></div>
    </el-col>
     <!-- <el-col :span="3">
      <div class="grid-content" ></div>
    </el-col>
      <el-col :span="3">
      <div class="grid-content" ></div>
    </el-col> -->

  </el-row>

  
      <el-row>
    <el-col :span="1.5">
      <div class="grid-content" >
         <el-button class="btn1" :style= "{width: '100px'}">波特率</el-button>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="grid-content1" >
         <el-select  v-model="selectedBaudRate" placeholder="请选择波特率"class="clacompact-select" >
            <el-option label="921600" value="921600" />
            <el-option label="4800" value="4800" />
            <el-option label="19200" value="19200" />
            <el-option label="38400" value="38400" />
            <el-option label="57600" value="57600" />
            <el-option label="115200" value="115200" />
        </el-select>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="grid-content" ></div>
    </el-col>
    <el-col :span="3">
      <div class="grid-content" >

      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content" ></div>
    </el-col>
  </el-row>
      
      
      <!-- <el-button @click="listPorts">查找串口列表</el-button>
     <el-button >串口列表</el-button>
      <el-select v-model="selectedPort" placeholder="请选择串口">
        <el-option
            v-for="port in serialPortList"
            :key="port.path"
            :label="port.path"
            :value="port.path"
        />
        </el-select>
        <el-button @click="openSpecificPort">打开串口</el-button>
        <el-button @click="closeSpecificPort">关闭串口</el-button> -->
      <!-- <el-button >波特率</el-button>
        <el-select v-model="selectedBaudRate" placeholder="请选择波特率"class="clacompact-select" >
            <el-option label="9600" value="9600" />
            <el-option label="4800" value="4800" />
            <el-option label="19200" value="19200" />
            <el-option label="38400" value="38400" />
            <el-option label="57600" value="57600" />
            <el-option label="115200" value="115200" />
        </el-select> -->

    </div>
  </div>
 <!-- <el-button @click="openSpecificPort">打开串口</el-button> -->
 
 
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { CirclePlus } from "@element-plus/icons-vue";
import { ElButton ,ElMessageBox, ElMessage ,ElRow,ElCol} from "element-plus";
import * as echarts from 'echarts'; 
// import { openSerialPort, closeSerialPort, currentPort, listSerialPorts,parseSerialData} from "../../serialport/index";
// import {consumermsg, saveMessages, setExperimentName} from "../../rabbitmq/rabbitmq";
import{openSerialPort, closeSerialPort, currentPort, listSerialPorts, parseSerialData, setExperimentName} from "../../msg/msg"
import {loadData} from "../../echarts/index";
import { fr } from 'element-plus/es/locales.mjs';
import { ipcRenderer } from 'electron';



const serialPortList = ref([]); // 存储串口列表
const selectedPort = ref("");   // 存储选中的串口路径
const selectedBaudRate= ref("9600"); // 存储选中的波特率
const currentExperimentName = ref(""); // 当前实验名称

const listPorts = async () => {
    try{
    const ports = await listSerialPorts();
    serialPortList.value = ports;
    if (ports.length > 0) {
      selectedPort.value = ports[0].path; // 默认选择第一个
        }
    } catch (error) {
        console.error("获取串口列表失败:", error); 
        alert("获取串口列表失败");
}
};

const openSpecificPort = async () => {
    if(!selectedPort.value){
        alert("请先选择串口");
        return;
    }

    try{
        const { value: experimentName } = await ElMessageBox.prompt('请输入实验名称', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /.+/, // 确保输入不为空
                inputErrorMessage: '不能为空'
            }
       );
        currentExperimentName.value = experimentName;
        // 设置实验名称供 RabbitMQ 模块使用
        setExperimentName(experimentName);

        const baudRate = parseInt(selectedBaudRate.value);//parseInt将字符串解析成整数
        await openSerialPort(selectedPort.value,baudRate);

        //await openSerialPort(selectedPort.value, parseInt(selectedBaudRate.value))
        alert(`串口 ${selectedPort.value} 已以 ${baudRate} 波特率打开`)
    } catch (error) {
        console.error("打开串口失败:", error);
    }
};

const closeSpecificPort = async () => { 
    if(!currentPort){
        alert("当前没有打开的串口");
        return;
    }

    try{
        await closeSerialPort(currentPort);  
        // await saveMessages();
        await parseSerialData(currentExperimentName.value);
        await loadData(currentExperimentName.value);
        alert("实验数据已保存")
        console.log("关闭串口成功");
    
    } catch (error) {
      console.error("操作失败:", error);
    }}




onMounted(() => {
    // console.log('页面加载完成，启动 RabbitMQ 消费者');
    // consumermsg();
    console.log('页面加载完成');
    listPorts();
   
});


</script>

<style>
btn1 {
  transition: none !important;
}

.btn1:not(.is-disabled):hover,
.btn1:not(.is-disabled):active,
.btn1:not(.is-disabled):focus {
  color: inherit !important;
  background-color: inherit !important;
  border-color: inherit!important;
  background-image: inherit !important;
  box-shadow: inherit !important;
  transform: inherit !important;
  opacity: 1 !important;
}

.btn1:not(.is-disabled):active {
  position: static !important;
  top: 0 !important;
  left: 0 !important;
}
.grid-content1{
  margin-right: auto
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh; /* 占满整个视口高度 */
}

.top-container,
.middle-container,
.bottom-container {
  padding: 20px;
  box-sizing: border-box;
}

/* 边框样式 */
.border {
  border: 1px solid #070f14;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.top-container {
  height: auto;
  min-height: 60px;
  background-color: transparent;
  border:none;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0.7rem;

}
  


.middle-container {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  background-color: #FAFAFA;
  margin: 1rem 0;
 padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
    flex-direction: column;

}

.bottom-container {
  height: auto;
  background-color: #FAFAFA;
}

.chart-wrapper{
  flex:1;
  width: 100%;
 min-height: 300px; /* 添加最小高度 */

}
.centered-title{
  text-align: center;
}
.compact-select {
  width: 180px; /* 缩小下拉框宽度 */
}

</style>